<template>
  <!-- 九条数据 -->
  <div class="ulList">
    <van-cell title="< 返回" arrow-direction="none" is-link to="/classify" />
    <van-tabs @click="onclick">
      <van-tab v-for="item in dataList" :title="item.name" :key="item.id">
      </van-tab>
    </van-tabs>
    <div class="title">
      <h2>{{ title.name }}</h2>
      <p>{{ title.desc }}</p>
    </div>
    <van-card
      v-for="item in dataLists"
      :key="item.id"
      :price="item.counterPrice"
      :title="item.name"
      :thumb="item.picUrl"
      @click="clickUlList(item.id)"
    />
    <van-divider dashed>没有更多了</van-divider>
  </div>
</template>

<script>
import request from '../../utils/request'
export default {
  name: 'ulList',
  components: {},
  data () {
    return {
      dataList: '',
      dataLists: [],
      title: '',
      id: ''
    }
  },
  // 计算属性
  computed: {},
  watch: {},
  mounted () {
    // 发起请求
    request('goods/category', { params: { id: this.$route.query.id } }).then(
      (res) => {
        // console.log(this.$route)
        request('goods/category', { params: { id: this.$route.query.id } }).then(
          (res) => {
            this.requests(res.data.data.brotherCategory[0].id)
          }
        )
        request('goods/list', { params: { id: this.$route.query.id } }).then(
          (res) => {
            // console.log(res)
          }
        )
        const { data } = res.data
        this.dataList = data.brotherCategory
        this.title = data.currentCategory
        // console.log(this.dataList)
      }
    )
  },
  methods: {
    requests (list, id) {
      request('goods/list', { params: { categoryId: list || id } }).then((res) => {
        const { data } = res.data
        this.dataLists = data.list
        // console.log(data)
      })
    },
    onclick (index, name) {
      this.requests(this.dataList[index].id)
      this.title = this.dataList[index]
      this.id = this.dataList[index].id
      // console.log(this.id)
      // 获取点击的元素的item.id
      // const itemId = event.target.getAttribute('data-id')
      // 更新URL中的id参数
      this.$router.push({
        path: '/ulList',
        query: {
          id: this.id
        }
      })
    },
    clickUlList (id) {
      this.$router.push('/sonFirstPublish?id=' + id)
    },
    goReturn () {
      history.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
.ulList {
  .title {
    h2,
    p {
      text-align: center;
    }
  }
}
</style>
